import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Icon, Modal, Form, Input, Select, Upload, Button } from 'antd';
//@ts-ignore
import LzEditor from 'react-lz-editor';
import Service from '@/public/http/services';
import style from './index.css';
import { GoodsClassify, OrderStatus } from '@/public/constant/enums';
const { TextArea } = Input;
const { Option } = Select;
const Delivery: React.FC<any> = ({ formData,visible,title, onOK, form, dispatch }) => {

  useEffect(() => {

  }, [visible])
  const payMap = {
    0:'支付宝',
    1:'微信'
  }

  const formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 14 },
  }

  const { getFieldDecorator } = form;
  return (
    <Modal
      visible={visible}
      title={title}
      okText={'保存'}
      cancelText={'取消'}
      onOk={() => {
        onOK && onOK(form)
      }}
      onCancel={() => {
        onOK(form)
      }}
      width={'65%'}
    >
      <div>

        <Form.Item {...formItemLayout} label={'订单号'}>
          {
            <div>{formData.orderNo}</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'订单状态'}>
          {
            <div>{OrderStatus[formData.status]}</div>
          }
        </Form.Item>
        {
          formData.payFrom?<Form.Item {...formItemLayout} label={'支付方式'}>
            {
              <div>{payMap[formData.payFrom]}</div>
            }
          </Form.Item>:''
        }
        <Form.Item {...formItemLayout} label={'类型'}>
          {
            <div>{GoodsClassify[formData.type]}</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'商品名称'}>
          {
            <div>{formData.goodsName}</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'商品规格'}>
          {
            <div>{
              formData.groupPropertyDtoList?formData.groupPropertyDtoList.map(item=>{
                return (
                  <div>
                    {item.groupName+':'+item.valueName}
                      <br/>
                  </div>
                )
              }):''

            }</div>
          }
        </Form.Item>

        <Form.Item {...formItemLayout} label={'商品单价'}>
          {
            <div>{formData.price}元</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'数量'}>
          {
            <div>{formData.num}</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'运费'}>
          {
            <div>{formData.deliverMoney}元</div>
          }
        </Form.Item>

        <Form.Item {...formItemLayout} label={'买家账户'}>
          {
            <div>{formData.userName}</div>
          }
        </Form.Item>
        <Form.Item {...formItemLayout} label={'买家手机号'}>
          {
            <div>{formData.phone}</div>
          }
        </Form.Item>

        {
          formData.kuaidiCode?<Form.Item {...formItemLayout} label={'快递单号'}>
            {
              <div>{formData.kuaidiCode}</div>
            }
          </Form.Item>:''
        }
        {
          formData.address?<Form.Item {...formItemLayout} label={'收货地址'}>
            {
              <div>{formData.address}</div>
            }
          </Form.Item>:''
        }
        {
          formData.deliverTime?<Form.Item {...formItemLayout} label={'发货时间'}>
            {
              <div>{formData.deliverTime.replace('T',' ')}</div>
            }
          </Form.Item>:''
        }

        {
          formData.createTime?<Form.Item {...formItemLayout} label={'创建订单时间'}>
            {
              <div>{formData.createTime.replace('T',' ')}</div>
            }
          </Form.Item>:''
        }
        {
          formData.cancelTime?<Form.Item {...formItemLayout} label={'取消订单时间'}>
            {
              <div>{formData.cancelTime.replace('T',' ')}</div>
            }
          </Form.Item>:''
        }
        <Form.Item {...formItemLayout} label={'订单总金额'}>
          {
            <div>{formData.realTotalMoney}元</div>
          }
        </Form.Item>

      </div>

    </Modal>
  );
}
const WrappedCreateModal = Form.create<any>({ name: 'modalForm' })(Delivery);
export default connect((state: any) => {
  return {
  }
})(WrappedCreateModal);
